<template>
  <div class="mpd-workspace-page-canvas display-flex flex-size-auto flex-direction-column">
    <div class="page-canvas flex-size-auto position-relative">
      <div class="full-box wpd-scroll padding-md">
        <page-draggable-dom
          v-if="reload"
          class="page-canvas-root-dom bg-color-white"
          :mConfig="mpdPageConfig"
          @update:mConfig="tmp => (mpdPageConfig.children = tmp.children)"
        ></page-draggable-dom>
        <page-widget selectItemKey="item"></page-widget>
      </div>
    </div>
    <div class="page-slot-panel" v-if="selectPageNodeDom.item.id && isArray(selectPageNodeDom.item.mpdConfig.slot)">
      <a-tabs v-model="tabActiveKey" size="small" :tabBarGutter="0" type="editable-card" @edit="onSlotTabsEdit">
        <a-tab-pane v-for="(item1, index1) in selectPageNodeDom.item.mpdConfig.slot" :key="index1">
          <template #tab>
            <a-input
              size="small"
              style="width: 100px"
              v-model="selectPageNodeDom.item.mpdConfig.slot[index1].title"
            ></a-input>
          </template>
        </a-tab-pane>
      </a-tabs>
      <div class="page-slot-panel-content wpd-scroll padding-xs padding-t-md">
        <template v-if="selectPageNodeDom.item.mpdConfig.slot.length > 0">
          <page-draggable-dom
            class="page-canvas-root-dom"
            v-if="reload"
            :mConfig="selectPageNodeDom.item.mpdConfig.slot[tabActiveKey]"
            selectItemKey="slotItem"
          ></page-draggable-dom>
          <page-widget selectItemKey="slotItem"></page-widget>
        </template>
        <template v-else>
          <p class="text-align-center margin-t-lg">请点击右上角加号添加slot</p>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import PageWidget from './PageWidget.vue'
import PageDraggableDom from '../page-preview/PageDraggableDom.vue'
import setting from '@/store/setting'
import { isArray } from '@/util/utils'
import { initDomValue, selectItem } from '@/util/pageUtil'

export default {
  components: {
    PageWidget,
    PageDraggableDom
  },
  inject: ['mpdPageConfig', 'selectPageNodeDom'],
  data() {
    return {
      reload: true,
      setting: setting,
      reloadCanvasValue: setting.reloadCanvasValue,
      tabActiveKey: 0
    }
  },
  watch: {
    'setting.reloadCanvasValue': {
      handler(val, oldVal) {
        if (val === true) {
          // 移除组件
          this.reload = false
          // 在组件移除后，重新渲染组件
          // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
          this.$nextTick(() => {
            this.reload = true
          })
          setting.reloadCanvasValue = false
        }
      }
    },
    'selectPageNodeDom.item.id': {
      handler: function() {
        this.tabActiveKey = 0
      }
    },
    tabActiveKey: {
      handler: function(val) {
        if (this.selectPageNodeDom.item.mpdConfig.slot && this.selectPageNodeDom.item.mpdConfig.slot.length > 0) {
          selectItem(
            this.selectPageNodeDom,
            this.selectPageNodeDom.item,
            this.selectPageNodeDom.item.mpdConfig.slot[val]
          )
        }
      }
    }
  },
  methods: {
    isArray,
    onSlotTabsEdit(targetKey, action) {
      switch (action) {
        case 'add':
          const tmp = {
            id: 'div',
            title: 'slot name ' + this.selectPageNodeDom.item.mpdConfig.slot.length,
            // 页面子节点
            children: []
          }
          // 初始化默认值
          initDomValue(tmp)
          this.selectPageNodeDom.item.mpdConfig.slot.push(tmp)
          this.tabActiveKey = this.selectPageNodeDom.item.mpdConfig.slot.length - 1
          if (this.tabActiveKey === 0) {
            this.$nextTick(() => {
              selectItem(this.selectPageNodeDom, this.selectPageNodeDom.item, tmp)
            })
          }
          break
        case 'remove':
          this.selectPageNodeDom.item.mpdConfig.slot.splice(targetKey, 1)
          if (this.tabActiveKey > targetKey) {
            this.tabActiveKey--
          } else if (targetKey > 0) {
            this.tabActiveKey = targetKey - 1
          } else {
            this.tabActiveKey = 0
          }
          if (this.tabActiveKey === 0) {
            selectItem(
              this.selectPageNodeDom,
              this.selectPageNodeDom.item,
              this.selectPageNodeDom.item.mpdConfig.slot[this.tabActiveKey]
            )
          } else {
            selectItem(this.selectPageNodeDom, this.selectPageNodeDom.item)
          }
          break
      }
    }
  }
}
</script>

<style lang="less">
.mpd-workspace-page-canvas {
  .page-canvas-root-dom {
    min-height: 100% !important;
  }
  .page-slot-panel {
    background: #ffffff;
    height: 200px;
    border-left: 1px solid var(--mpd-content-side-workspace-bg-color);
    border-right: 1px solid var(--mpd-content-side-workspace-bg-color);
    position: relative;
    .ant-tabs-tab {
      padding: 0 8px !important;
    }
    .ant-tabs-bar {
      margin: 0;
    }
    .page-slot-panel-content {
      position: relative;
      height: calc(100% - 40px);
    }
  }
}
</style>
